<template>
  <div class="node-library">
    <div class="library-header">
      <h3>
        <i class="el-icon-menu"></i>
        节点库
      </h3>
      <el-button 
        type="text" 
        icon="el-icon-close" 
        @click="$emit('close')"
        size="mini"
      />
    </div>
    
    <div class="library-content">
      <div class="category-section">
        <h4 class="category-title">
          <i class="el-icon-s-data"></i>
          数据表
        </h4>
        
        <div class="node-templates">
          <div 
            v-for="template in dataTableTemplates" 
            :key="template.id"
            class="node-template"
            draggable="true"
            @dragstart="handleDragStart($event, template)"
            @click="handleTemplateClick(template)"
          >
            <div class="template-icon">
              <i :class="template.icon"></i>
            </div>
            <div class="template-info">
              <div class="template-name">{{ template.name }}</div>
              <div class="template-desc">{{ template.description }}</div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="category-section">
        <h4 class="category-title">
          <i class="el-icon-s-operation"></i>
          业务流程
        </h4>
        
        <div class="node-templates">
          <div 
            v-for="template in processTemplates" 
            :key="template.id"
            class="node-template"
            draggable="true"
            @dragstart="handleDragStart($event, template)"
            @click="handleTemplateClick(template)"
          >
            <div class="template-icon">
              <i :class="template.icon"></i>
            </div>
            <div class="template-info">
              <div class="template-name">{{ template.name }}</div>
              <div class="template-desc">{{ template.description }}</div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="category-section">
        <h4 class="category-title">
          <i class="el-icon-s-custom"></i>
          自定义
        </h4>
        
        <div class="node-templates">
          <div 
            class="node-template add-custom"
            @click="handleAddCustom"
          >
            <div class="template-icon">
              <i class="el-icon-plus"></i>
            </div>
            <div class="template-info">
              <div class="template-name">自定义节点</div>
              <div class="template-desc">创建自定义节点</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NodeLibrary',
  data() {
    return {
      // 数据表模板
      dataTableTemplates: [
    {
      id: 'user-table',
      name: '用户表',
      description: '用户基础信息表',
      icon: 'el-icon-user',
      type: 'table',
      fields: [
        { name: 'id', type: 'int', isPrimaryKey: true, isRequired: true },
        { name: 'username', type: 'varchar(50)', isPrimaryKey: false, isRequired: true },
        { name: 'email', type: 'varchar(100)', isPrimaryKey: false, isRequired: true },
        { name: 'created_at', type: 'datetime', isPrimaryKey: false, isRequired: true }
      ]
    },
    {
      id: 'product-table',
      name: '商品表',
      description: '商品信息表',
      icon: 'el-icon-goods',
      type: 'table',
      fields: [
        { name: 'id', type: 'int', isPrimaryKey: true, isRequired: true },
        { name: 'name', type: 'varchar(100)', isPrimaryKey: false, isRequired: true },
        { name: 'price', type: 'decimal(10,2)', isPrimaryKey: false, isRequired: true },
        { name: 'category_id', type: 'int', isPrimaryKey: false, isRequired: false }
      ]
    },
    {
      id: 'order-table',
      name: '订单表',
      description: '订单信息表',
      icon: 'el-icon-s-order',
      type: 'table',
      fields: [
        { name: 'id', type: 'int', isPrimaryKey: true, isRequired: true },
        { name: 'user_id', type: 'int', isPrimaryKey: false, isRequired: true },
        { name: 'total_amount', type: 'decimal(10,2)', isPrimaryKey: false, isRequired: true },
        { name: 'status', type: 'varchar(20)', isPrimaryKey: false, isRequired: true },
        { name: 'created_at', type: 'datetime', isPrimaryKey: false, isRequired: true }
      ]
    }
      ],
      
      // 业务流程模板
      processTemplates: [
    {
      id: 'start-process',
      name: '开始',
      description: '流程开始节点',
      icon: 'el-icon-video-play',
      type: 'process',
      fields: []
    },
    {
      id: 'decision-process',
      name: '判断',
      description: '条件判断节点',
      icon: 'el-icon-s-help',
      type: 'process',
      fields: [
        { name: 'condition', type: 'string', isPrimaryKey: false, isRequired: true }
      ]
    },
    {
      id: 'action-process',
      name: '处理',
      description: '业务处理节点',
      icon: 'el-icon-s-tools',
      type: 'process',
      fields: [
        { name: 'action', type: 'string', isPrimaryKey: false, isRequired: true }
      ]
    },
    {
      id: 'end-process',
      name: '结束',
      description: '流程结束节点',
      icon: 'el-icon-video-pause',
      type: 'process',
      fields: []
    }
      ]
    }
  },
  methods: {
    // 拖拽开始
    handleDragStart(event, template) {
      if (event.dataTransfer) {
        event.dataTransfer.setData('application/json', JSON.stringify({
          type: 'template',
          template: template
        }))
        event.dataTransfer.effectAllowed = 'copy'
      }
    },

    // 点击模板
    handleTemplateClick(template) {
      this.$emit('add-node', template)
    },

    // 添加自定义节点
    handleAddCustom() {
      this.$prompt('请输入节点名称', '创建自定义节点', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^.{1,20}$/,
        inputErrorMessage: '节点名称长度在1到20个字符'
      }).then(({ value }) => {
        const customTemplate = {
          id: `custom-${Date.now()}`,
          name: value,
          description: '自定义节点',
          icon: 'el-icon-s-custom',
          type: 'custom',
          fields: [
            { name: 'field1', type: 'string', isPrimaryKey: false, isRequired: false }
          ]
        }
        this.$emit('add-node', customTemplate)
      }).catch(() => {
        this.$message.info('已取消创建')
      })
    }
  }
}
</script>

<style scoped>
.node-library {
  width: 280px;
  height: 100%;
  background: white;
  border-right: 1px solid #e0e0e0;
  display: flex;
  flex-direction: column;
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
}

.library-header {
  height: 50px;
  padding: 0 16px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f8f9fa;
}

.library-header h3 {
  margin: 0;
  font-size: 16px;
  color: #333;
  display: flex;
  align-items: center;
  gap: 8px;
}

.library-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.category-section {
  margin-bottom: 24px;
}

.category-title {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: #666;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid #f0f0f0;
}

.node-templates {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.node-template {
  display: flex;
  align-items: center;
  padding: 12px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: white;
}

.node-template:hover {
  border-color: #409eff;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
  transform: translateY(-1px);
}

.node-template.add-custom {
  border-style: dashed;
  border-color: #c0c4cc;
}

.node-template.add-custom:hover {
  border-color: #67c23a;
  box-shadow: 0 2px 8px rgba(103, 194, 58, 0.2);
}

.template-icon {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background: #f0f9ff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  flex-shrink: 0;
}

.template-icon i {
  font-size: 16px;
  color: #409eff;
}

.add-custom .template-icon {
  background: #f0f9f0;
}

.add-custom .template-icon i {
  color: #67c23a;
}

.template-info {
  flex: 1;
  min-width: 0;
}

.template-name {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.template-desc {
  font-size: 12px;
  color: #999;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 滚动条样式 */
.library-content::-webkit-scrollbar {
  width: 6px;
}

.library-content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.library-content::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.library-content::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style>